<template>
    <div class="main-analysis">
        <p class="zd-title">
            <span>新增</span>
            <span>访客数{{ data.match_visit_new_user_count }}</span>
        </p>
        <div class="zd-tree">
            <div class="zd-top">
                <p class="zd_bottom_hore"/>
                <p class="zd_top_line"/>
                <p class="zd_top_hore"/>
                <p class="zd_next"/>
            </div>
            <div class="zd-top-rate">
                <p class="zd_bottom_hore"/>
                <p class="zd_top_line"/>
                <p class="zd_top_hore"/>
                <p class="zd_next"/>
            </div>
        </div>
        <div class="zd-data">
            <div class="zd-data-top">
                <p class="zd-data-text">非下沙十校</p>
                <p class="zd-data-text">{{ data.match_visit_new_user_count - data.match_visit_new_forum_user_count }}人</p>
            </div>
            <div class="zd-data-bottom">
                <p class="zd-data-text">下沙十校</p>
                <p class="zd-data-text">{{ data.match_visit_new_forum_user_count }}人</p>
            </div>
        </div>
        <div
            class="zd-three-tree"
            style="margin-top:-17px"
        >
            <div class="zd-tree-area">
                <p class="zd-arae-hore"/>
                <p class="zd_next"/>
            </div>
        </div>
        <div
            class="zd-data-to"
            style="margin-top: -41px"
        >
            <div class="zd-data-top zd-top">
                <p class="zd-data-text">答题人数</p>
                <p class="zd-data-text">{{ data.match_visit_exam_user_count }}人</p>
            </div>
        </div>
        <div class="zd-to-tree">
            <div class="zd-top top">
                <p class="zd_bottom_hore"/>
                <p class="zd_top_line"/>
                <p class="zd_top_hore"/>
                <p class="zd_next"/>
            </div>
            <div class="zd-top-rate left">
                <p class="zd_bottom_hore"/>
                <p class="zd_top_line"/>
                <p class="zd_top_hore"/>
                <p class="zd_next"/>
            </div>
        </div>
        <div
            class="zd-data-to"
            style="margin-top: -37px"
        >
            <div class="zd-data-bottom top color">
                <p class="zd-data-text">答题通过人数</p>
                <p class="zd-data-text">{{ data.match_visit_forum_enable_new_user_count }}人</p>
            </div>
            <div class="zd-data-bottom color">
                <p class="zd-data-text">答题未通过人数</p>
                <p class="zd-data-text">{{ data.match_visit_exam_user_count - data.match_visit_forum_enable_new_user_count }}人</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {};
    },
    props: {
        data: {
            type: Object,
            default: ()=>{}
        }
    }
};
</script>

<style lang="less" scoped>
    .main-analysis {
        position: relative;
        display: flex;
        align-items: center;
        height: 205px;
        .zd-title {
            width: 57px;
            height: 205px;
            font-size: 14px;
            color: #000;
            font-weight: 500;
            line-height: 22px;
            margin-top: 115px;
            margin-right: 10px;
            margin-left: 8px;
            text-align: center;
            span {
                white-space: nowrap;
            }
        }
        .zd-tree, .zd-to-tree {
            width: 28px;
            height: 205px;
            padding-top: 38px;
            .zd-top,.zd-top-rate {
                position: relative;
                width: 28px;
                height: 35px;
                .zd_bottom_hore {
                   width:  14px;
                   height: 1px;
                   background: #D8D8D8;
                   position: absolute;
                   bottom: 0;
                   left: 0;
                }
                .zd_top_line {
                    width:  1px;
                   height: 35px;
                   background: #D8D8D8;
                   position: absolute;
                   bottom: 0;
                   left: 14px;
                }
                .zd_top_hore {
                    width: 8px;
                    height: 1px;
                    background: #D8D8D8;
                    position: absolute;
                    top: 0;
                    left: 14px;
                }
                .zd_next {
                    width: 0px;
                    height: 0px;
                    border-width: 7px;
                    border-style: solid;
                    border-color: transparent transparent transparent#D8D8D8;
                    position: absolute;
                    right: -7px;
                    top: -6px;
                }
            }
            .zd-top-rate {
                margin-top: 21px;
                .zd_bottom_hore {
                    top: 0px;
                    left: 0px;;
                }
                .zd_top_hore {
                    top: 35px;
                    left: 14px;;
                }
                .zd_next {
                    top: 28px;
                }
            }
            .top {
                margin-top: 100px;
                margin-left: 9px;
            }
            .left {
                margin-left: 9px;
            }
        }
        .zd-data, .zd-data-to {
            width: 78px;
            height: 205px;
            margin: 21px 5px 0 5px;
            .zd-data-top, .zd-data-bottom {
                width: 78px;
                height: 42px;
                background:rgba(129,168,234,1);
                border-radius:8px;
                .zd-data-text {
                    width: 78px;
                    height: 21px;
                    color: #ffffff;
                    font-size: 12px;
                    text-align: center;
                    line-height: 21px;
                }
            }
            .zd-data-bottom {
                margin-top: 57px;
            }
        }
        .zd-data-to,.zd-data-fore {
            .zd-data-top {
                width: 88px;
                height: 42px;
                background: #64B76D;
                .zd-data-text {
                    width: 100%;
                    height: 21px;
                    line-height: 21px;
                }
            }
            .zd-top {
                margin-top: 132px;
                background: #EAAC50;
            }
            .zd-data-bottom {
                margin-top: 24px;
                position: relative;
                width: 88px;
                height: 42px;
                background: #64B76D;
                .zd-hover{
                    left: 59px;
                    top: -11px;
                    color: #ffffff;
                    font-size: 12px;
                }
                .zd-data-text {
                    width: 100%;
                    height: 21px;
                    line-height: 21px;
                }
            }
            .top {
                margin-top: 100px;
            }
            .color {
                background: #FF7470;
            }
        }
        .zd-to-tree,.zd-three-tree {
            width: auto !important;
            height: 100%;
            margin-top: -99px;
            .zd-tree-area {
                display: flex;
                align-items: center;
                margin-bottom: 49px;
                .zd-arae-hore {
                    width: 18px;
                    height: 1px;
                    background: #D8D8D8;
                }
                .zd_next {
                    width: 0px;
                    height: 0px;
                    border-width: 7px;
                    border-style: solid;
                    border-color: transparent transparent transparent#D8D8D8;
                }
            }
            .zd-top {
                .zd_top_line {
                    height: 22px;
                }
                .zd_top_hore {
                    top: 13px;
                }
                .zd_next {
                    top: 7px;
                }
            }
            .zd-top-rate {
                .zd_top_line {
                    height: 22px;
                    top: 0px;
                }
                .zd_top_hore {
                    top: 21px;
                    left: 14px;;
                }
                .zd_next {
                    top: 15px;
                }
            }
        }
        .zd-three-tree {
            .zd-tree-area {
                margin-top: 133px;
                margin-left: 10px;
            }
        }
        .zd-hover {
            border: none;
            width: 16px;
            height: 16px;
            background: transparent;
            position: absolute;
            left: 18px;
            top: 48px;
        }
    }
</style>